<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>固件升级</title>
    <meta name="ctx" th:content="${#httpServletRequest.getContextPath()}"/>
    <link rel="stylesheet" th:href="@{/css/admin/base-v2.css}">
    <link rel="stylesheet" th:href="@{/lib/font-awesome/4.7.0/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/css/admin/app.css}">
</head>

<body>

<div class="app-page">

    <div class="app-page-content">
        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">
                    <!-- 过滤器 -->
                    <form class="filter">
                        <div class="filter-group">
                            <input type="hidden" name="deviceUpgradeId" th:value="${deviceUpgradeId}">
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label"><label>固件版本号</label></div>
                                    <div class="body">
                                        <select name="firmVer">
                                            <option value="">---请选择---</option>
                                            <option th:each="firmVerison: ${versionNameList}"
                                                    th:value="${#strings.replace(firmVerison,' ','*')}"
                                                    th:text="${firmVerison}"
                                                    th:selected="${firmVer}">
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label"><label>在线状态</label></div>
                                    <div class="body">
                                        <select name="deviceStatus" id="">
                                            <option value="">---请选择---</option>
                                            <option th:each="dsm: ${deviceStatusMap}"
                                                    th:value="${dsm.key}"
                                                    th:text="${dsm.value}"
                                                    th:selected="${deviceStatus}">
                                            </option>
                                        </select>
                                    </div>
                                </div>

                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label"><label>机型</label></div>
                                    <div class="body">
                                        <select name="modelName">
                                            <option value="">---请选择---</option>
                                            <option th:each="deviceMode: ${deviceModelList}"
                                                    th:value="${deviceMode.deviceModel}"
                                                    th:text="${deviceMode.deviceModel}"
                                                    th:selected="${modelName}">
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="areaSelect filter-group">
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label">选择省份</div>
                                    <div class="body">
                                        <select name="province" class="select-province" data-rule="required"
                                                data-name="省份">
                                            <option value="">选择所在省份</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label">选择城市</div>
                                    <div class="body">
                                        <select name="city" class="select-city" data-rule="required" data-name="市区">
                                            <option value="">选择所在市区</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label">选择区县</div>
                                    <div class="body">
                                        <select name="area" class="select-district" data-rule="required" data-name="区县">
                                            <option value="">选择所在区县</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="filter-group">
                            <div class="filter-item">
                                <div class="form-item row">
                                    <div class="label"><label>商家名称</label></div>
                                    <div class="flex1">
                                        <input type="text" placeholder="商家名称" name="companyName">
                                    </div>
                                </div>
                            </div>
                            <div class="filter-item">
                                <button class="z-btn z-primary">查询</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="app-card">
            <div class="app-card-body">
                <div class="app-card-body-con">

                    <div class="z-btn-group">
                        <button class="j-btn-control z-btn z-primary">升级固件</button>
                    </div>


                    <table class="z-table">
                        <thead>
                        <th>
                            <input type="checkbox" class="input j-checkbox-all">
                        </th>
                        <th>所属商家</th>
                        <th>设备名称</th>
                        <th>在线状态</th>
                        <th>省</th>
                        <th>市</th>
                        <th>区</th>
                        <th>机型</th>
                        <th>固件版本号</th>
                        </thead>
                        <tbody>
                        <tr th:each="firmDevice:${firmDeviceList}" th:attr="data-devcice-code=${firmDevice.deviceCode}">
                            <td><input type="checkbox" class="input j-checkbox"></td>
                            <td th:text="${firmDevice.companyName}"></td>
                            <td th:text="${firmDevice.deviceName}"></td>
                            <td th:text="${firmDevice.deviceStatusDesc}"></td>
                            <td th:text="${firmDevice.province}"></td>
                            <td th:text="${firmDevice.city}"></td>
                            <td th:text="${firmDevice.area}"></td>
                            <td th:text="${firmDevice.deviceModel}"></td>
                            <td th:text="${firmDevice.currentFirmVer}"></td>
                        </tr>
                        </tbody>
                    </table>

                    <!-- 分页 -->
                    <div class="table-info z-pat z-fl">
                        总计：<p class="total" th:text="${total}"></p>在线：<p class="online" th:text="${onlineCount}"></p>离线：
                        <p class="offline" th:text="${offlineCount}"></p>
                    </div>
                    <div class="clearfix">
                        <div class="z-page z-pat z-fr">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script th:src="@{/lib/jquery.min.js}"></script>
<script th:src="@{/lib/layer-v3.1.1/layer/layer.js}"></script>
<script th:src="@{/js/form.js}"></script>
<script th:src="@{/js/admin/app.js}"></script>
<script th:src="@{/js/pagination.js}"></script>
<script th:src="@{/js/popup.js}"></script>
<script th:src="@{/js/address-0.0.3.js}"></script>
<script>
    //获取context path
    var context = $("meta[name='ctx']").attr("content");

    // 省市区
    var province = '[[${province}]]';
    var city = '[[${city}]]';
    var area = '[[${area}]]';
    // 省市区
    $(".filter").address({
        provinceText: '选择省',
        cityText: '选择市',
        districtText: '选择区',
        apiUrl: 'http://xc-dmp.37226.com/api/area',
        // 默认值
        defaultProvince: province,
        defaultCity: city,
        defaultDistrict: area,
    });

    //处理分页
    var pageNum = [[${pageNum}]];
    var pageSize = [[${pageSize}]];
    var total = [[${total}]];

    // 加载select联动内容
    $('[name="searchType"] option').each(function (index, element) {
        if ((App.query.searchType === undefined && index === 0) || App.query.searchType == $(this).val()) {
            $('.j-option-switch .content').html($(".search").children('div').eq(index).html())
        }
    })

    // 从URL加载搜索数据
    $(".filter").formLoad(App.query);

    var pagination = new Pagination(".z-page", {
        pageIndex: pageNum, // 当前页数
        pageSize: pageSize, // 每页数量
        count: total, // 总条数
        maxButtonCount: 5, // 分页按钮数量(可选)
        // 分页切换事件
        onPageChanged: function (pageIndex) {
            var url = context + "/firmware/firmDeviceList";
            var paramStr = createParamStr(pageIndex, pageSize);
            if (paramStr !== "") {
                paramStr = paramStr.substring(1);
                url = url + "?" + paramStr;
            }
            window.location.href = url;
        }
    });

    /**
     * 创建参数字符串
     * @param pageIndex 当前页
     * @param pageSize 每页条数
     * @returns {string} 参数字符串
     */
    function createParamStr(pageIndex, pageSize) {
        var deviceUpgradeId = $("input[name='deviceUpgradeId']").val();
        var firmVer = $("select[name='firmVer']").val();
        var deviceStatus = $("select[name='deviceStatus']").val();
        var companyName = $("input[name='companyName']").val();
        var modelName = $("select[name='modelName']").val();
        var provinceSelect = $("select[name='province']").val();
        var citySelect = $("select[name='city']").val();
        var areaSelect = $("select[name='area']").val();

        var url = "";
        if (!isBlank(pageIndex)) {
            url = url + "&pageNum=" + pageIndex;
        }
        if (!isBlank(pageSize)) {
            url = url + "&pageSize=" + pageSize;
        }

        if (!isBlank(firmVer)) {
            url = url + "&firmVer=" + firmVer;
        }
        if (!isBlank(deviceStatus)) {
            url = url + "&deviceStatus=" + deviceStatus;
        }
        if (!isBlank(companyName)) {
            url = url + "&companyName=" + companyName;
        }
        if (!isBlank(modelName)) {
            url = url + "&modelName=" + modelName;
        }
        if (!isBlank(provinceSelect)) {
            url = url + "&province=" + provinceSelect;
        }
        if (!isBlank(citySelect)) {
            url = url + "&city=" + citySelect;
        }
        if (!isBlank(areaSelect)) {
            url = url + "&area=" + areaSelect;
        }
        if (!isBlank(deviceUpgradeId)) {
            url = url + "&deviceUpgradeId=" + deviceUpgradeId;
        }
        return url;
    }


    //检查参数
    function isBlank(param) {
        if (undefined === param) {
            return true;
        }
        if (null == param) {
            return true;
        }
        if ("" === param) {
            return true;
        }
        return false;
    }


    // 更新
    $('.j-btn-control').click(function (params) {
        var deviceUpgradeId = $("[name='deviceUpgradeId']").val();
        if (deviceUpgradeId == '') {
            popup.tipsTop("软件升级ID为空，请联系管理员", 'warning');
            return;
        }
        var deviceCodes = getSelecteDevice();
        if (deviceCodes != '') {
            if (confirm('确认是否升级')) {
                $.ajax({
                    type: "POST",
                    url: context + "/firmware/updateFirmware",
                    data: {
                    	deviceCodes: deviceCodes,
                        deviceUpgradeId: deviceUpgradeId
                    },
                    success: function (obj) {
                        var code = obj.code;
                        if (code == 0) {
                            // 升级完成 - 全部成功
                            popup.tipsTop('升级完成', 'success');
                            setTimeout(function (args) {
                                //跳转到列表界面
                                parentOpen(context + "/firmware/list");
                            }, 2000);
                        } else {
                            popup.tipsTop(obj.msg, 'warning');
                        }
                    }
                })
            }
        } else {
            popup.tipsTop("请选择需要升级的数据", 'warning');
        }
    });

    // 获取表格中选择的ID
    function getSelecteDevice() {
        let temp = [];
        $('tbody [type="checkbox"]').each(function (index, element) {
            if (element.checked == true) {
                console.log($(this).parents('tr,.tr'));
                temp.push($(this).parents('tr,.tr').data('devcice-code'));
            }
        })
        return temp.join(',');
    }

    function parentOpen(url) {
        $(window.parent.window)[0].location.href = url;
    }
</script>
<script>
</script>

</body>

</html>